<html>
<head>
<title>TurKit Editor</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}

.fill {
	width: 100%;
	height: 100%;
}

.iconButton {
	position: absolute;
	left: 0px;
	top: 0px;
	cursor: pointer;
	width: 16px;
	height: 16px;
	z-index: 100;
}

.title {
	font-size: small;
	vertical-align: bottom;
}

.lastToWrite {
	font-weight: bold;
}

.hide {
	visibility: hidden;
}

.saveButton {
	background-image: url('icons/save_grey.png');
}

div.saveButton:hover {
	background-image: url('icons/save.png');
}

.reloadButton {
	background-image: url('icons/reload_grey.png');
}

div.reloadButton:hover {
	background-image: url('icons/reload.png');
}
</style>
</head>
<body>
<script src="jquery.js"> </script>
<script src="tab.js"> </script>
<script src="myutil.js"> </script>
<script>

___COMMON___

function positionButtons() {
    var leftMost = $(window).width()
    
    var editor = $('#editor').get(0)    
	var isVerticalScrollbar = editor.scrollHeight > editor.clientHeight;
	if (isVerticalScrollbar) {
		leftMost -= 16
	}
    
    $('.saveButton').css("left", (leftMost - 32) + "px")
    $('.reloadButton').css("left", (leftMost - 16) + "px")
}

function onResize() {
	positionButtons()
}

var saveTimeout = 0
function queueSave() {
	dequeueSave()
	dirty = true
	$('.saveButton').css('visibility', 'visible')
    saveTimeout = setTimeout(save, 2000)
}
function dequeueSave() {
	clearTimeout(saveTimeout)
}

var dirty = false
function save(cont) {
	if ((typeof cont) != "function") cont = function () {}

	dequeueSave()
	if (dirty) {
		dirty = false
	    ajaxCont('/api', {
	        "method" : "setFileTestData",
	        "file" : file.key,
	        "data" : $('#editor').val()
	    }, function (e) {
		    if (!dirty)
			    $('.saveButton').css('visibility', 'hidden') 
		}, cont)
	} else {
		cont()
	}
}

var oldIsVerticalScrollBar = false
var oldValue = null
function onChange() {
	var editor = $('#editor')
	if (oldValue == null || editor.val() != oldValue) {
		oldValue = editor.val()
		setLastToWrite("server")
		queueSave()
	}

	editor = editor.get(0)
	var isVerticalScrollbar = editor.scrollHeight > editor.clientHeight;
	if (isVerticalScrollbar != oldIsVerticalScrollBar) {
		oldIsVerticalScrollBar = isVerticalScrollbar
		onResize()
	}
}

function setLastToWrite(author) {
	$('.title').removeClass('lastToWrite')
	$('#' + author + 'Title').addClass('lastToWrite')
}

function reload(val) {
	if ((typeof val) == "object") {
		var key = file.serverTestData + ":" + file.clientTestData + ":" + file.lastTestDataAuthor
		if (oldValue == null || key != oldValue) {
			oldValue = key

			setLastToWrite(file.lastTestDataAuthor)
			
			var editor = $('#editor')
			var scrollTop = editor.get(0).scrollTop
			editor.val(file.serverTestData)
	        editor.get(0).scrollTop = scrollTop

	        $('#clientData').val(file.clientTestData)
	        
	        onResize()
		}
	} else {
		cont = val
		if ((typeof cont) != "function") cont = function () {}

	    ajaxCont('/api', {
	        "method" : "getFile",
	        "file" : file.key
	    }, function (e) {
		    file = eval(e)
		    reload(file)
		}, cont)
	}
}

function reloadPoll() {
	setTimeout(function () {
		if (!dirty) {
			reload(reloadPoll)
		} else {
			reloadPoll()
		}
	}, 5000)
}

$(function () {
	file = eval($('#file').val())
	
    reload(file)
	reloadPoll()
	$('#editor').
        bind('keydown', onChange).
        bind('keyup', onChange).
        bind('keypress', onChange).
        bind('change', onChange)

	$(window).resize(onResize)
    $('.saveButton').click(save)
    $('.reloadButton').click(reload)
    $('.saveButton').css('visibility', 'hidden')
})

</script>

<textarea style="display:none" id="file">___FILE___</textarea>
<div class="saveButton iconButton"></div>
<div class="reloadButton iconButton"></div>
<table class="fill">
	<tr style="width: 100%; height: 20px">
		<td style="width:50%;height:20px"><div id="serverTitle" class="title">server data</div></td>
		<td style="width:50%;height:20px"><div id="clientTitle" class="title">client data</div></td>
	</tr>
	<tr class="fill">
		<td style="width:50%;height:100%"><textarea id="editor" class="fill"
			onkeydown="checkTab(event)"></textarea></td>
		<td style="width:50%;height:100%"><textarea id="clientData" class="fill" readonly="readonly"
			onkeydown="checkTab(event)"></textarea></td>
	</tr>
</table>

</textarea>

</body>
</html>
